<template>
  <el-form :model="state.searchForm">
    <div style="height: 44px">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form-item label="生产单号">
            <el-input
              v-model="state.searchForm.hcode"
              placeholder="请录入生产单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="存货编码">
            <el-input
              v-model="state.searchForm.invcode"
              placeholder="请录入存货编码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button-group>
            <el-button type="primary" @click="searchParamFilter">
              高级
            </el-button>
            <el-button type="primary" @click="refreshDispatchList">
              查询
            </el-button>
            <el-button type="primary" @click="toSave">保存</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <SearchParamDialog
        ref="searchParamDialogRef"
        @search-param-callback="searchParamCallback"
      />
    </div>
  </el-form>
</template>
<script setup>
  import SearchParamDialog from '../dialog/SearchParamDialog.vue'
  const searchParamDialogRef = ref()
  const state = reactive({
    searchForm: {
      hcode: '',
      invcode: '',
      invname: '',
    },
  })
  const searchParamFilter = () => {
    searchParamDialogRef.value.handleOpen(state.searchForm)
  }
  const refreshDispatchList = () => {
    _emits('searchParamCallback', state.searchForm)
    _emits('refreshData')
  }
  const searchParamCallback = (param) => {
    state.searchForm = {
      ...(state.searchForm || {}),
      ...(param || {}),
    }
    _emits('searchParamCallback', state.searchForm)
    _emits('refreshData')
  }
  const toSave = () => {
    _emits('saveData')
  }
  const _emits = defineEmits(['searchParamCallback', 'refreshData', 'saveData'])
</script>
<style lang="scss" scoped></style>
